---
title: Remix Quickstart
sidebar_label: Remix
description: "Add Convex to a Remix project"
hide_table_of_contents: true
sidebar_position: 200
---

import sampleData from "!!raw-loader!@site/../private-demos/quickstarts/remix/sampleData.jsonl";
import root from "!!raw-loader!@site/../private-demos/quickstarts/remix/app/root.tsx";
import tasks from "!!raw-loader!@site/../private-demos/quickstarts/remix/convex/tasks.ts";
import index from "!!raw-loader!@site/../private-demos/quickstarts/remix/app/routes/_index.tsx";

Learn how to query data from Convex in a Remix app.

<StepByStep>
  <Step title="Create a Remix site">
    Create a Remix site using the `npx create-remix@latest` command.

    <br></br>

    ```sh
    npx create-remix@latest my-remix-app
    ```

  </Step>

  <Step title="Install the Convex library">
    To get started, install the `convex` package.

    ```sh
    cd my-remix-app && npm install convex
    ```

  </Step>

  <Step title="Set up a Convex dev deployment">
    Next, run `npx convex dev`. This
    will prompt you to log in with GitHub,
    create a project, and save your production and deployment URLs.

    It will also create a `convex/` folder for you
    to write your backend API functions in. The `dev` command
    will then continue running to sync your functions
    with your dev deployment in the cloud.


    ```sh
    npx convex dev
    ```

  </Step>

  <Step title="Create sample data for your database">
    Create a `sampleData.jsonl` file at the root of you app
    and fill it with the sample data given.

    <Snippet
      source={sampleData}
      title="sampleData.jsonl"
    />

  </Step>

  <Step title="Add the sample data to your database">
    Now that your project is ready, add a `tasks` table
    with the sample data you just created in `sampleData.jsonl`
    into your Convex database with the `import` command.

    ```
    npx convex import --table tasks sampleData.jsonl
    ```

  </Step>

  <Step title="Expose a database query">
    Add a new file <JSDialectFileName name="tasks.ts" /> in the `convex/` folder
    with a query function that loads the data.

    Exporting a query function from this file
    declares an API function named after the file
    and the export name, `api.tasks.get`.

    <Snippet
      source={tasks}
      title="convex/tasks.ts"
    />

  </Step>

  <Step title="Wire up the ConvexProvider">
    Modify `app/root.tsx` to set up the Convex client there to make it available on every page of your app.

    <Snippet
      source={root}
      title="app/root.tsx"
    />

  </Step>

  <Step title="Display the data in your app">
    In `app/routes/_index.tsx` use `useQuery` to subscribe your `api.tasks.get`
    API function.

    <Snippet
      source={index}
      title="app/routes/_index.tsx"
    />

  </Step>

  <Step title="Start the app">
    Start the app, open [http://localhost:5173](http://localhost:5173) in a browser,
    and see the list of tasks.

    ```sh
    npm run dev
    ```

  </Step>

</StepByStep>

Remix uses the React web library. See the complete
[React documentation](/client/react.mdx).
